<template>
    <div class="Stit">
        <header>
        <van-nav-bar
        title="商品"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        fixed:true
        />
        
        <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            show-action
            shape="round"
            @search="onSearch"
            >
        </van-search>
        </header>
        <section>
        <div class="Slb">
        <van-tabs v-model="active">

        
        <van-tab  title="手提包" >
            <div class="Slist" v-for='item in List' :key="item.inde">
                <img :src=item.pimg>
                <p>{{item.pname}}</p>
                <p>{{item.pprice}}</p>
            </div>
            <!-- <div class="Slist">
                <img src="http://www.goumin.com/attachments/photo/0/0/112/28751/7360490.jpg">
                <p>N2 Louis Vuitton/路...</p>
                <p>￥6300</p>
            </div>
            <div class="Slist">
                <img src="http://www.goumin.com/attachments/photo/0/0/112/28751/7360490.jpg">
                <p>N2 Louis Vuitton/路...</p>
                <p>￥6300</p>
            </div>
            <div class="Slist">
                <img src="http://www.goumin.com/attachments/photo/0/0/112/28751/7360490.jpg">
                <p>N2 Louis Vuitton/路...</p>
                <p>￥6300</p>
            </div>
            <div class="Slist">
                <img src="http://www.goumin.com/attachments/photo/0/0/112/28751/7360490.jpg">
                <p>N2 Louis Vuitton/路...</p>
                <p>￥6300</p>
            </div>
            <div class="Slist">
                <img src="http://www.goumin.com/attachments/photo/0/0/112/28751/7360490.jpg">
                <p>N2 Louis Vuitton/路...</p>
                <p>￥6300</p>
            </div> -->
        </van-tab>

        <van-tab title="品牌" >
            <van-cell title="CARTIER/卡地亚" />
            <van-cell title="BVLGARI/宝格丽" />
            <van-cell title="CHANEL/香奈儿" />
            <van-cell title="DIor/迪奥" />
            <van-cell title="Louis Vuitton/路易威登" />
            <van-cell title="Hermes/爱马仕" />
            <van-cell title="Baienciage/巴黎世家" />
            <van-cell title="Prada/普拉达" />
            <van-cell title="CARTIER/卡地亚" />
            <van-cell title="BVLGARI/宝格丽" />
            <van-cell title="CHANEL/香奈儿" />
            <van-cell title="Dior/迪奥" />
            <van-cell title="Louis Vuitton/路易威登" />
        </van-tab>


        <van-tab title="排序">
            <van-cell title="发布时间" />
            <van-cell title="价格升序" />
            <van-cell title="价格降序" />

            <van-grid :border="false" :column-num="2">
            <van-grid-item v-for='item in List' :key="item.inde">
                <van-image :src=item.pimg />
                <span>{{item.pname}}</span>
                <span>{{item.pprice}}</span>
            </van-grid-item>
            
            </van-grid>
        </van-tab>


        <van-tab title="筛选" class="Stab">
            <p>价格</p>
            <table border="0" class="S1tab">
                <tr>
                    <td>￥1000元以下</td>
                    <td>￥1000-5000</td>
                    <td>￥5000-1万</td>
                    <td>￥1万-10万</td>
                    <td>￥10万以上</td>
                </tr>
            </table>
            <p>适用人群</p>
            <table border="0" class="S1tab">
                <tr>
                    <td>所有人</td>
                    <td>男士</td>
                    <td>女士</td>
                </tr>
            </table>
            <p>成色</p>
            <table border="0" class="S1tab">
                <tr>
                    <td>全新</td>
                    <td>98新</td>
                    <td>95新</td>
                    <td>9新</td>
                    <td>85新</td>
                </tr>
            </table>
            <van-button plain type="primary" size="max" class="Sbtn1">重置</van-button>
            <van-button plain type="danger" class="Sbtn2" @click="Sbtn2">确定</van-button>

            <van-grid :border="false" :column-num="2">
            <van-grid-item v-for='item in List' :key="item.inde">
                <van-image :src=item.pimg />
                <span>{{item.pname}}</span>
                <span>{{item.pprice}}</span>
            </van-grid-item>
            
            </van-grid>

        </van-tab>
        </van-tabs>
        </div>
        </section>
        <footer></footer>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            value:'',
             active: 0,
            List:[]

        }
    },
    methods: {
        onClickLeft() {
            if(this.active==0){
                this.$router.push('/Sclassify')
            }else{
                this.active=0
            }
        
        },
        onSearch(){

        },
        Sbtn2(){
            this.active=0
        }
},
mounted(){
    let _this=this
     axios({
                url:"http://w34uc5.natappfree.cc/secondHand/goods/getLatestGoodsList"
        }).then((data)=>{
            console.log(data.data)   
            _this.List=data.data.data
        })
        }

}
</script>

<style scoped>

.van-search__action div{
    display: none;
}
.van-icon-search:before{
    display: none;
}
.van-field__control{
    border: 1px solid #ccc;
    width: 6rem;
    height: 0.8rem;
    border-radius: 0.5rem
}
.van-search .van-cell{
    padding: 0;
}
.van-search--show-action{
    padding: 0;
}
.Stit{
    display: flex;
    height: 100vh;
    flex-direction: column;
}
header{
    height: 1.87rem
}
section{
    flex:1;
    overflow:auto;
}
.S1tab td{
    width: 2rem;
    font-size: 0.3rem;
    display: block;
    float: left;
    margin-left: 0.2rem;
    padding:0;
}
section span{
    font-size: 0.29rem;
    margin-left: 0;
}
.Stab p{
    font-size: 0.35rem;
}
.Sbtn1{
    width: 4.5rem;
    border: 0.01rem solid #ccc;
    height:0.8rem;
    line-height: 0.8rem;
}
.Sbtn2{
    width: 2.7rem;
    height:0.8rem;
    border: 0.01rem solid #ccc;
    line-height: 0.8rem;
}
.Slist{
    width: 49%;
    height: 5rem;
    border: 1px solid #ccc;
    float: left;
}
.Slist img{
    width: 3.76rem;
    height: 3.8rem;
}
.Slist p{
    font-size: 0.3rem;
    text-align: center;
    margin: 0;
    padding: 0;
}
</style>


